<script lang="ts">
	import { page } from '$app/state';
	import { USER_ROLE } from '$lib/api/proto/user_api';
	import RoadmapFlow from '$lib/components/roadmap/RoadmapFlow.svelte';
	import { roadmapStore } from '$lib/components/roadmap/store.svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import { SvelteFlowProvider } from '@xyflow/svelte';
	import ShareModal from './ShareModal.svelte';
	import { Share2 } from 'lucide-svelte';

	const roadmapId = page.url.searchParams.get('roadmapId') ?? '';

	let roadmapMode = $state(
		(userStore.userInfo?.basicInfo?.userRole == USER_ROLE.USER_ROLE_COACH ? 'edit' : 'update') as
			| 'edit'
			| 'update'
			| 'view'
	);
	let showShareModal = $state(false);

	$effect(() => {
		roadmapStore.init(roadmapId, roadmapMode);
	});
</script>

<div class="absolute right-[20px] -top-[50px] flex gap-2 items-center">
	{#if userStore.userInfo?.basicInfo?.userRole == USER_ROLE.USER_ROLE_COACH}
		<div role="tablist" class="tabs tabs-box bg-base-300">
			<button
				role="tab"
				class="tab {roadmapMode == 'edit' ? 'tab-active' : ''}"
				onclick={() => (roadmapMode = 'edit')}>编辑模式</button
			>
			<button
				role="tab"
				class="tab {roadmapMode == 'update' ? 'tab-active' : ''}"
				onclick={() => (roadmapMode = 'update')}>测试模式</button
			>
			<button
				role="tab"
				class="tab {roadmapMode == 'view' ? 'tab-active' : ''}"
				onclick={() => (roadmapMode = 'view')}>查看模式</button
			>
		</div>
		<button class="btn btn-accent" onclick={() => (showShareModal = true)}>
			<Share2 size={16} />分享
		</button>
	{/if}
</div>

<SvelteFlowProvider>
	<RoadmapFlow heightStyle="h-[calc(100vh-110px)]" />
</SvelteFlowProvider>

<div class="absolute -left-[10000px]">
	{#if showShareModal}
		<ShareModal onClose={() => (showShareModal = false)} />
	{/if}
</div>
